var sleep = new Vue({
	el: '#sleep',
	data: {
		themeColor: '#F86F68',
		timeTab: ['日', '周', '月', '年'],
		timeType: 0,
		myDate: new Date,
		nowTime: '',
		startTime: '',
		endTime: '',
		progress: 0,
		heartRate: 80,
		chart: null
	},
	created() {
		this.nowTime = dayjs(this.myDate).format('YYYY/MM/DD');
		this.startTime = dayjs(this.myDate).subtract(1 % 7, 'days').startOf('week').add(1 % 7, 'days').format(
			'YYYY/MM/DD');
		this.endTime = dayjs(this.myDate).subtract(1 % 7, 'days').endOf('week').add(1 % 7, 'days').format(
			'YYYY/MM/DD');
	},
	mounted() {
		this.initCalendar()
		this.initMainChart()
		this.intervalChart()
	},
	methods: {
		checkDate(i) {
			this.timeType = i
			if (i === 0) {
				this.initMainChart()
			} else {
				this.intervalChart()
			}
		},
		initMainChart() {
			const data = [{
				time: '2016-08-08 00:00:00',
				tem: 10
			}, {
				time: '2016-08-08 00:10:00',
				tem: 22
			}, {
				time: '2016-08-08 00:30:00',
				tem: 16
			}, {
				time: '2016-08-09 00:35:00',
				tem: 26
			}, {
				time: '2016-08-09 01:00:00',
				tem: 12
			}, {
				time: '2016-08-09 01:20:00',
				tem: 26
			}, {
				time: '2016-08-10 01:40:00',
				tem: 18
			}, {
				time: '2016-08-10 02:00:00',
				tem: 26
			}, {
				time: '2016-08-10 02:20:00',
				tem: 12
			}];
			this.chart = new F2.Chart({
				id: 'mainChart',
				pixelRatio: window.devicePixelRatio
			});
			this.chart.source(data, {
				time: {
					type: 'timeCat',
					tickCount: 3,
					range: [0, 1]
				},
				tem: {
					tickCount: 5,
					min: 0
				}
			});

			this.chart.axis('time', {
				label: function label(text, index, total) {
					const textCfg = {};
					if (index === 0) {
						textCfg.textAlign = 'left';
					} else if (index === total - 1) {
						textCfg.textAlign = 'right';
					}
					return textCfg;
				}
			});
			this.chart.tooltip({
				showItemMarker: false,
				triggerOn: ['touchstart', 'touchmove'],
				triggerOff: 'touchend', // 消失的触发行为，可自定义
				showCrosshairs: true, // 是否显示辅助线
				yTipBackground: {
					fill: null
				},
				crosshairsStyle: {
					stroke: this.themeColor
				},
				background: {
					radius: 10,
					fill: '#EEEEEE',
					padding: [6, 10]
				}, // tooltip 内容框的背景样式
				valueStyle: {
					fontSize: 9,
					fill: '#333333',
				},
				nameStyle: {
					fontSize: 9,
					fill: '#333333',
				},
				onShow: function onShow(ev) {
					const items = ev.items;
					items[0].name = null;
					items[0].name = items[0].title;
					items[0].value = '心率 ' + items[0].value;
				}
			});

			this.chart.area()
				.position('time*tem')
				.color('l(90) 0:#F86F68 1:#fff')
				.shape('smooth');
			this.chart.line()
				.position('time*tem')
				.color('#F86F68')
				.shape('smooth');
			this.chart.render();

		},
		intervalChart() {
			var data = [{
				x: '一',
				y: [76, 100]
			}, {
				x: '二',
				y: [56, 108]
			}, {
				x: '三',
				y: [38, 129]
			}, {
				x: '四',
				y: [58, 155]
			}, {
				x: '五',
				y: [45, 120]
			}, {
				x: '六',
				y: [23, 99]
			}, {
				x: '七',
				y: [18, 56]
			}];
			var charts = new F2.Chart({
				id: 'iChart',
				pixelRatio: window.devicePixelRatio
			});
			charts.source(data, {
				y: {
					tickCount: 5
				}
			});
			charts.tooltip({
				showItemMarker: false,
				onShow: function onShow(ev) {
					var items = ev.items;
					items[0].name = '范围';
					var value = items[0].value;
					items[0].value = value[0] + ' 至 ' + value[1];
				}
			});
			charts.interval().position('x*y').animate({
				appear: {
					animation: 'shapesScaleInY'
				}
			}).color(this.themeColor).style({
				radius: [10, 10, 10, 10]
			});;
			charts.render();
		},
		initCalendar() {
			//天
			var stepDate = new XNDatepicker(document.querySelector("#step-date"), {
				format: 'YYYY/MM/DD',
				type: 'date',
				multipleDates: [], //当为多选日期类型时的初始值
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function (data) {
				console.log(data)
			}, function (close) {
				console.log(close)
			})
			//周
			var stepDate = new XNDatepicker(document.querySelector("#step-week"), {
				format: 'YYYY/MM/DD',
				type: 'week',
				multipleDates: [], //当为多选日期类型时的初始值
				startTime: this.startTime,
				endTime: this.endTime,
				separator: '-',
				showType: 'modal',
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function (data) {
				console.log(data)
			})
			//月
			var stepDate = new XNDatepicker(document.querySelector("#step-month"), {
				format: 'YYYY/MM',
				type: 'month',
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function (data) {
				console.log(data)
			})
			//年
			var stepDate = new XNDatepicker(document.querySelector("#step-year"), {
				type: 'year',
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function (data) {
				console.log(data)
			})
		},

	},
	filters: {
		filterTitle(num) {
			switch (num * 1) {
				case 0:
					return '本日概览'
				case 1:
					return '本周概览'
				case 2:
					return '本月概览'
				case 3:
					return '本年概览'
			}
		}
	}
})

$(document).ready(function () {
	$(".date-info .show-date").on('click', function () {
		$("#dateMask").addClass('show').removeClass("hide");
	})
})